<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
  <script src="../../layui/layui.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="layui-container">
    <div class="layui-row layui-col-space15">
      <h3>在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。</h3>
      <h3>依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）</h3>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
              <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
              <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助111文字</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
              <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
              <input type="checkbox" name="like[write]" title="写作">
              <input type="checkbox" name="like[read]" title="阅读" checked>
              <input type="checkbox" name="like[dai]" title="发呆">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
              <input type="checkbox" name="switch" lay-skin="switch">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
              <input type="radio" name="sex" value="男" title="男">
              <input type="radio" name="sex" value="女" title="女" checked>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
              <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
          </div>
          <!-- <div class="layui-form-item">
      <div class="layui-input-block">
       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
     </div> -->
        </form>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <form action="" class="layui-form">
        <div class="layui-col-md12">
          <h3>输入框</h3>
          <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
            class="layui-input">
          <h3>下拉选择框</h3>
          <select name="city" lay-verify="">
            <option value="">请选择一个城市</option>
            <option value="010">北京</option>
            <option value="021">上海</option>
            <option value="0571">杭州</option>
          </select>

          <p>上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，</p>
          <p>你可以通过设定 selected 来设定默认选中项</p>
          <p>属性disabled开启禁用，select和option标签都支持</p>
          <p>你还可以通过 optgroup 标签给select分组</p>
          <select name="quiz">
            <option value="">请选择</option>
            <optgroup label="城市记忆">
              <option value="你工作的第一个城市">你工作的第一个城市？</option>
            </optgroup>
            <optgroup label="学生时代">
              <option value="你的工号">你的工号？</option>
              <option value="你最喜欢的老师">你最喜欢的老师？</option>
            </optgroup>
          </select>
          <p>以及通过设定属性 lay-search 来开启搜索匹配功能</p>
          <select name="city" lay-verify="" lay-search>
            <option value="010">layer</option>
            <option value="021">form</option>
            <option value="0571" selected>layim</option>
          </select>
          <h3>复选框</h3>
          默认风格：
          <input type="checkbox" name="" title="写作" checked>
          <input type="checkbox" name="" title="发呆">
          <input type="checkbox" name="" title="禁用" disabled>

          原始风格：
          <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
          <input type="checkbox" name="" title="发呆" lay-skin="primary">
          <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
          <p>属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）</p>
          <p>属性checked可设定默认选中</p>
          <p>属性lay-skin可设置复选框的风格</p>
          <p>设置value="1"可自定义值，否则选中时返回的就是默认的on</p>
          <h3>开关</h3>
          <p>其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格</p>
          <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
          <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
          <p>属性checked可设定默认开</p>
          <p>属性disabled开启禁用</p>
          <p>属性lay-text可自定义开关两种状态的文本</p>
          <p>设置value="1"可自定义值，否则选中时返回的就是默认的on</p>
          <h3>单选框</h3>
          <input type="radio" name="sex" value="nan" title="男">
          <input type="radio" name="sex" value="nv" title="女" checked>
          <p>属性title可自定义文本</p>
          <p>属性disabled开启禁用</p>
          <p>设置value="xxx"可自定义值，否则选中时返回的就是默认的on</p>
          <h3>文本域</h3>
          <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
          <p>class="layui-textarea"：layui.css提供的通用CSS类</p>
          <h3>组装行内表单</h3>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">范围</label>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid">-</div>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <p>class="layui-inline"：定义外层行内</p>
          <p>class="layui-input-inline"：定义内层行内</p>
        </div>
      </form>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <form action="" class="layui-form layui-form-pane">
          <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
              <input type="text" name="title" autocomplete="off" placeholder="请输入汉字" class="layui-input" required>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
              <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">日期选择</label>
              <div class="layui-input-block">
                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label for="" class="layui-form-label">行内表单</label>
              <div class="layui-input-inline">
                <input type="text" name="number" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>

          <div class="layui-form-item">
            <button class="layui-btn" type="submit" lay-submit lay-filter="demo2">跳转式提交</button>
          </div>
        </form>
      </div>
    </div>
    <p><a href="./07-formDemo.html">demo</a></p>
  </div>
  <script>
    layui.use(['form', 'laydate', 'layedit'], function () {
      var form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate;
      form.render();
      laydate.render({ elem: "#date1" });
      //监听提交
      // form.on('submit(formDemo)', function (data) {
      //  layer.msg(JSON.stringify(data.field));
      //  return false;
      // });

      form.on('submit(demo2)', function (data) {
        console.log(data.field);
        return false
      });

    });
  </script>
</body>

</html>